<template>
	<view class="order-pay">
		<view class="price">￥<span style="font-size: 50rpx;">{{ (order_info.amount/100).toFixed(2) }}</span></view>
		<view class="expire">支付剩余时间：<u-count-down :time=" order_info.expire_time - new Date().getTime()" format="HH:mm:ss"></u-count-down></view>
			
		<view class="item">
			<view class="title">
				支付方式
			</view>
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view style="display: flex;align-items: center;">
					<image class="icon" src="/static/images/wechat.png" mode=""></image>
					<view style="margin-left: 30rpx;">
						<view style="font-size: 30rpx;">微信支付</view>
						<view style="font-size: 24rpx;color: #acacac;margin-top: 5rpx;">使用微信快捷支付</view>
					</view>
				</view>
				<view style="width: 40rpx;height: 40rpx;background-color: #E93323;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
					<u-icon name="checkmark" color="white" size="12"></u-icon>
				</view>
			</view>
		</view>
		
		<view class='bottom'>
			<view class="confirm" @click="createPayment">确认支付</view>
			<view class="cancel" @click="goStatus(order_info.out_trade_no)">暂不支付</view>
		</view>
		
		<vk-uni-pay
			ref="vkPay"
			:status.sync="vkPay.status"
			:code-url.sync="vkPay.codeUrl"
			:qrcode-image.sync="vkPay.qrcodeImage"
			:query-payment-action="vkPay.queryPaymentAction"
			:page-show="vkPay.pageShow"
			:auto-get-openid="vkPay.autoGetOpenid"
			:polling="vkPay.polling"
			:return-url="vkPay.returnUrl"
			:await-notify="vkPay.awaitNotify"
			:pay-order-info="vkPay.payOrderInfo"
		></vk-uni-pay>
	</view>
</template>

<script>
	export default {
		onLoad(option){
			console.log(option)
			let { out_trade_no } = option
			this.getOrderInfo(out_trade_no)
			this.out_trade_no = out_trade_no
			this.form1.out_trade_no = out_trade_no
		},
		data() {
			return {
				out_trade_no:{},
				order_info:{},
				vkPay: {
					/**
					 * 查询支付状态的云函数配置
					 * 如果是非路由框架，则action为字符串，值为云函数名称
					 * 如果是路由框架，则按下方配置填写
					 * 注意：queryPaymentAction内参数用默认即可，无需更改。（除非你已经知道参数的意义）
					 */
					queryPaymentAction: {
						name: "vk-pay", // 云函数名称
						action: "pay/queryPayment", // 路由模式下云函数地址
						actionKey: "action", // 路由模式下云函数地址的识别key
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// PC支付的付款二维码地址，渲染二维码需要自己写，可以参考示例中的二维码组件 vk-uni-qrcode
					codeUrl: "",
					qrcodeImage: "",
					// 当前支付状态 0:等待发起支付 1:支付中 2:已支付（注意：跟数据库的status无关）
					status: 0,
					// 当前页面是否显示
					pageShow: true,
					// 启用轮询检测订单支付状态（仅h5支付有效）
					polling: true,
					// 仅微信手机外部浏览器H5支付时有效，必须是http或https开头的绝对路径，且在微信H5支付配置的域名白名单中。你还需要将此H5域名加入uniCloud白名单
					// 如果此值为空，则默认返回当前页面，返回的页面url参数会带上confirmShow=true&out_trade_no=实际订单号
					returnUrl: "",
					// 确认已支付的弹窗开关（微信手机外部浏览器H5支付时有效）
					confirmShow: false,
					// 支付成功后，是否需要等待异步回调全部执行完成后才通知前端（当awaitNotify和payOrderInfo均为false时，支付成功的响应速度最快）
					awaitNotify: true,
					// 支付成功后，是否需要返回支付订单数据（当awaitNotify和payOrderInfo均为false时，支付成功的响应速度最快）
					payOrderInfo: false,
					// 是否自动获取小程序的openid（若传false，则在createPayment时需要自己传对应的openid，一般服务商模式下需要传false）
					autoGetOpenid: true,
				},
				form1:{
					provider: "wxpay", // 支付供应商 wxpay 微信支付 alipay 支付宝支付
					total_fee: 1, // 支付金额（单位分，100=1元）
					out_trade_no: "", // 订单号
					subject: "测试订单标题", // 订单标题
					body: "测试订单详情", // 订单详情
					type: "recharge", // 支付回调类型
				}
			}
		},
		methods: {
			goStatus(out_trade_no){
				uni.redirectTo({
					url:`/pages/order/order_pay_status/order_pay_status?out_trade_no=${out_trade_no}`
				})
			},
			createPayment(){
				let that = this
				let form1 = this.form1
				that.$refs.vkPay.createPayment({
					// 如果是非路由框架，则外层action不再是json，而为字符串，值为云函数名称，如 action: "你的云函数名称"
					// 如果是路由框架，则按下方配置填写
					// 如果云函数name为 vk-pay，则无需改动 action
					action: {
						name: "vk-pay", // 云函数名称
						action: "pay/createPayment", // 路由模式下云函数地址
						actionKey: "action", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// 请求数据（data内的参数会传给云函数，云函数中通过 data.xxx 的方式获取）
					data: {
						provider: form1.provider,
						total_fee: form1.total_fee,
						out_trade_no: form1.out_trade_no,
						subject: form1.subject,
						body: form1.body,
						type: form1.type,
					},
					// 支付订单创建成功回调
					create: res => {
						console.log('pay-create', res);
						this.form1.out_trade_no = res.out_trade_no; // 如果订单号是云端生成的，这里可以拿到订单号，此处如果return false; 则不再执行后续逻辑
					},
					// 支付成功回调
					success: res => {
						// 此处一般是写支付成功的提示或跳转到支付成功的页面。
						uni.showToast({ title: "支付成功", icon: "success", mask: false });
						console.log("pay-success", res);
						
						this.goStatus(this.form1.out_trade_no)
					},
					// 失败回调
					fail: res => {
						console.error("pay-fail", res);
						if (res.failType === "create") {
							// 创建支付失败时提示
							uni.showModal({ title: "提示", content: res.msg, showCancel: false });
						} else if (res.failType === "request") {
							// 请求支付失败时提示
							uni.showToast({ title: "请求支付失败", icon: "none", mask: false });
						} else if (res.failType === "result") {
							// 支付结果失败时提示
							uni.showToast({ title: "支付失败", icon: "none", mask: false });
						}
						
						this.goStatus(this.form1.out_trade_no)
					},
					// 取消回调
					cancel: res => {
						uni.showToast({ title: "用户取消支付", icon: "none", mask: false });
						this.goStatus(this.form1.out_trade_no)
					}
				});
			},
			getOrderInfo(out_trade_no){
				vk.callFunction({
					url: '/client/pages/order/kh/get_order_info',
					title: '请求中...',
					data: {
						out_trade_no:out_trade_no
					},
				}).then((res) => {
					console.log(res)
						this.order_info = res.data
						this.form1.total_fee = res.data.amount
						this.form1.subject = res.data.payment_type
						this.form1.provider = res.data.platform // 支付供应商 wxpay 微信支付 alipay 支付宝支付
						this.form1.body  = res.data.title + '商品租赁'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.price{
		color: #E93323;
		font-family: emoji;
		margin-bottom: 20rpx;
		font-size: 30rpx;
	}
	
	.expire{
		display: flex;
		align-items: center;
		color: #E93323;
		margin-bottom: 40rpx;
		font-size: 26rpx;
		background-color: white;
		padding: 8rpx 30rpx;
		border-radius: 50rpx;
		
		/deep/ .u-count-down__text{
		color: #E93323;
		}
	}
	
	.order-pay{
		box-sizing: border-box;
		padding-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
		
		
		.item{
			width: 720rpx;
			background-color: white;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 30rpx;
			
			.title{
				font-size: 28rpx;
				color: #6c6c6c;
				margin-bottom: 25rpx;
			}
			
			.icon{
				width: 50rpx;
				height: 50rpx;
			}
		}
		
		.bottom{
			position: absolute;
			bottom: 60rpx;
			padding-bottom:  env(safe-area-inset-bottom) !important;
			
			.confirm{
				width: 700rpx;
				padding: 25rpx 0;
				background-color: #E93323;
				color: white;
				font-size: 30rpx;
				border-radius: 80rpx;
				text-align: center;
			}
			
			.cancel{
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #9d9d9d;
				width: 100%;
				text-align: center;
			}
		}
	}
</style>
